import React, { FC, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Tabs } from 'antd-mobile-v2';
import { ConnectProps, ConnectState } from 'typings/connect';
import { MyStatus } from '../approval/constants';
import List from './components/List';
import { DEFAULT_PAGESIZE, START_PAGEINDEX } from '@/services/constant';

type ApprovalListPage = ConnectProps

// 审批业务首页
const ApprovalPage: FC<ApprovalListPage> = (props) => {
  const [currentTab, setCurrentTab] = useState<any>({
    title: '待我审批',
    sub: '1',
    myStatus: MyStatus.ToApproval,
    effectKey: 'capproval/getMyTaskList',
    tabId: 'toapproval'
  });
  const [pageNum, setPageIndex] = useState(START_PAGEINDEX);
  const [taskData, setTaskData] = useState<any>();

  const tabs = [
    {
      title: '待我审批',
      sub: '1',
      myStatus: MyStatus.ToApproval,
      effectKey: 'capproval/getMyTaskList',
      tabId: 'toapproval'
    },
    {
      title: '我已审批',
      sub: '2',
      myStatus: MyStatus.Approvaled,
      effectKey: 'capproval/getMyTaskList',
      tabId: 'approvaled'
    },
    {
      title: '抄送我的',
      sub: '3',
      myStatus: MyStatus.CopyToMe,
      effectKey: 'capproval/getCopyToMeList',
      tabId: 'copyme'
    },
    {
      title: '我发起的',
      sub: '4',
      myStatus: MyStatus.MyApply,
      effectKey: 'capproval/getMyProcessList',
      tabId: 'myapply'
    }
  ];

  useEffect(() => {
    document.title = '审批列表';
    getList({
      myStatus: MyStatus.ToApproval,
      effectKey: 'capproval/getMyTaskList'
    });
  }, []);

  const getList = (arg?: {
    myStatus: number;
    effectKey: string;
    pageNum?: number;
  }) => {
    const keepPageIndex = arg?.pageNum || pageNum;
    setTaskData(null);
    props.dispatch &&
      props
        .dispatch({
          type: arg?.effectKey || 'capproval/getMyTaskList',
          payload: {
            // 这个字段只有已审批和待审批才传
            operationType:
              arg?.myStatus === MyStatus.Approvaled ||
                arg?.myStatus === MyStatus.ToApproval
                ? arg.myStatus
                : undefined,
            pageNum: keepPageIndex,
            pageSize: DEFAULT_PAGESIZE
          }
        })
        .then((res: any) => {
          if (res) {
            if (keepPageIndex > 1) {
              const originData = taskData?.data;
              res.data = [...(originData || []), ...res.data];
            }
            setTaskData(res);
            setPageIndex(keepPageIndex);
          }
        });
  };

  const handleChange = (tab: any) => {
    getList({ pageNum: 1, ...tab });
    setCurrentTab(tab);
  };
  return (
    <>
      <Tabs
        tabs={tabs}
        initialPage={0}
        onChange={(tab) => {
          handleChange(tab);
        }}
        onTabClick={(tab, index) => {
          console.log('onTabClick', index, tab);
        }}
      >
        <List tabId={currentTab.tabId} taskData={taskData}></List>
      </Tabs>
    </>
  );
};

export default connect(({ loading }: ConnectState, props: any) => {
  return {
    loading: loading.effects[props.effectKey]
  };
})(ApprovalPage);
